<!DOCTYPE html>

<script src="../../resources/js-test.js"></script>
<script>
window.jsTestIsAsync = true;
window.setPrintTestResultsLazily();

description("Ensure that overflow clamping takes into account the container and content size " +
            "that are applied in the same animation frame.");


function runTests() {
    var container = document.querySelector("#overflowContainer");
    testOverflowClamp(container, container, document.querySelector("#overflowContainer > div"));

    var iframe = document.querySelector("iframe");
    testOverflowClamp(iframe, iframe.contentDocument.body, iframe.contentDocument.body, function(){
        setTimeout(finishJSTest, 500);
    });

    function testOverflowClamp(container, scroller, content, onDone) {
        // ensure 400px of overflow
        container.style.height = "100px";
        content.style.height = "500px";

        scroller.scrollTop = 200;

        window.requestAnimationFrame(function() {
            // Increase the height of the container by an amount that would cause clamping but also
            // change the content size by the same amount which should mean that scroll position remains
            // the same.
            container.style.height = "500px";
            content.style.height = "900px";

            window.requestAnimationFrame(function () {
                window.scroller = scroller;
                shouldBeEqualToNumber("scroller.scrollTop", 200);

                if (onDone) onDone();
            });
        });
    }
}
</script>

<div id="overflowContainer" style="overflow: scroll;">
    <div></div>
</div>
<iframe height="100px" onload="runTests()"></iframe>
